import dynamic from 'next/dynamic';
import React from 'react';
import { ChartType, ComposedChartType } from '../libs/chartCommon';
import SimpleTableSpl from './charts/SimpleTableSpl';
const AreaChart = dynamic(() => import('./charts/AreaChart'));
const BarChart = dynamic(() => import('./charts/BarChart'));
const LineBarComposedChart = dynamic(() => import('./charts/LineBarComposedChart'));
const PieChart = dynamic(() => import('./charts/PieChart'));
const SimpleTable = dynamic(() => import('./charts/SimpleTable'));
const LineChart = dynamic(() => import('./charts/LineChart'));

export type ChartSelectionProps = {
  data: any;
  xlabel?: string;
  height: string;
  chartType: ChartType;
  metrics: string[];
  yscroll?: number;
  stackedLabelPrefix?: string;
  composedChartMapping?: { [key: string]: ComposedChartType };
  pageSizeOptions?: string[];
  existTotal?: boolean;
  doTableSearch?: boolean;
};

function ChartSelection({
  data,
  xlabel = '',
  height,
  chartType,
  metrics,
  yscroll,
  stackedLabelPrefix,
  composedChartMapping = {},
  pageSizeOptions = ['10', '20', '50', '100'],
  existTotal = true,
  doTableSearch = true,
}: ChartSelectionProps) {
  const props = {
    data: data,
    xlabel: xlabel,
    yaxis: metrics,
    height: height,
  };
  switch (chartType) {
    case ChartType.BAR:
    case ChartType.STACKEDBAR:
      return (
        <BarChart {...props} stacked={true} stackedLabelPrefix={stackedLabelPrefix} />
      );
    case ChartType.MULTILINE:
    case ChartType.LINE:
      return <LineChart data={data} xlabel={xlabel} height={height} />;
    case ChartType.STACKEDAREA:
      return (
        <AreaChart {...props} stacked={true} stackedLabelPrefix={stackedLabelPrefix} />
      );
    case ChartType.PIE:
      return (
        <PieChart data={data} height={height} stackedLabelPrefix={stackedLabelPrefix} />
      );
    case ChartType.TABLE:
      return (
        <SimpleTable
          data={data}
          yscroll={yscroll}
          pageSizeOptions={pageSizeOptions}
          existTotal={existTotal}
          doSearch={doTableSearch}
        />
      );
      case ChartType.TABLESPL:
        return (
          <SimpleTableSpl
            data={data}
            yscroll={yscroll}
            pageSizeOptions={pageSizeOptions}
            existTotal={existTotal}
            doSearch={doTableSearch}
          />
        );
    case ChartType.LINEBARCOMPOSED:
      return (
        <LineBarComposedChart {...props} composedChartMapping={composedChartMapping} />
      );
    default:
      return null;
  }
}

export default ChartSelection;
